/* Search Modal Styles */
.vuefinder__search-modal {
  @apply flex h-full flex-col;
}

.vuefinder__search-modal__content {
  @apply flex flex-1 flex-col overflow-visible;
}

/* Search Bar */
.vuefinder__search-modal__search-bar {
  @apply relative z-10 flex items-center gap-2 overflow-visible py-3;
}

.vuefinder__search-modal__search-input {
  @apply relative flex flex-1 items-center gap-3 rounded-lg border border-(--vf-border-primary) px-3 py-2;
}

.vuefinder__search-modal__search-input:focus-within {
  @apply ring-1 ring-(--vf-accent-color);
}

.vuefinder__search-modal__search-input:has(input:disabled) {
  @apply cursor-not-allowed opacity-60;
}

.vuefinder__search-modal__search-icon {
  @apply h-4 w-4 flex-shrink-0 stroke-(--vf-accent-primary) text-(--vf-bg-primary);
}

.vuefinder__search-modal__input {
  @apply flex-1 border-0 bg-transparent text-(--vf-text-primary) placeholder-(--vf-text-secondary) outline-none;
}

.vuefinder__search-modal__input:disabled {
  @apply cursor-not-allowed text-(--vf-text-secondary) opacity-60;
}

.vuefinder__search-modal__loading {
  @apply flex items-center;
}

.vuefinder__search-modal__loading-icon {
  @apply h-4 w-4 animate-spin text-(--vf-text-secondary);
}

.vuefinder__search-modal__loading-icon svg {
  @apply fill-current stroke-current;
}

/* Dropdown */
.vuefinder__search-modal__dropdown-btn {
  @apply flex rounded-lg border border-(--vf-border-primary) bg-(--vf-bg-primary) p-2 text-(--vf-text-secondary) transition-all duration-200;
}

.vuefinder__search-modal__dropdown-btn:hover {
  @apply bg-(--vf-bg-secondary) text-(--vf-text-primary);
}

.vuefinder__search-modal__dropdown-btn--active {
  @apply border-(--vf-border-primary) bg-(--vf-bg-secondary) text-(--vf-text-primary) shadow-sm;
}

.vuefinder__search-modal__dropdown-btn:disabled {
  @apply cursor-not-allowed border-(--vf-border-primary) bg-(--vf-bg-primary) text-(--vf-text-secondary) opacity-60;
}

.vuefinder__search-modal__dropdown-btn:disabled:hover {
  @apply bg-(--vf-bg-primary) text-(--vf-text-secondary);
}

.vuefinder__search-modal__dropdown-icon {
  @apply h-4 w-4 text-current;
}

.vuefinder__search-modal__dropdown-icon svg {
  @apply fill-current stroke-current;
}

.vuefinder__search-modal__dropdown {
  @apply pointer-events-none fixed z-[10001] min-w-[200px];
  /* Initial positioning - will be overridden by Floating UI */
  left: -9999px;
  top: -9999px;
}

.vuefinder__search-modal__dropdown--visible {
  @apply pointer-events-auto;
}

.vuefinder__search-modal__dropdown-content {
  @apply box-border flex w-full flex-col rounded-md border shadow-sm;
  background-color: var(--vf-dropdown-bg);
  border-color: var(--vf-dropdown-border);
}

/* Section */
.vuefinder__search-modal__dropdown-section {
  @apply flex flex-col shadow-xs;
}

.vuefinder__search-modal__dropdown-title {
  @apply border-b px-3 py-1.5 text-sm font-medium;
  color: var(--vf-dropdown-text);
  background-color: var(--vf-dropdown-bg);
  border-color: var(--vf-dropdown-border);
}

/* Options */
.vuefinder__search-modal__dropdown-options {
  @apply flex flex-col;
}

.vuefinder__search-modal__dropdown-option {
  @apply box-border flex w-full cursor-pointer items-center justify-between px-3 py-1.5 text-left text-sm transition-colors duration-150;
  color: var(--vf-dropdown-text);
  background-color: transparent;
}

.vuefinder__search-modal__dropdown-option:hover {
  background-color: var(--vf-dropdown-hover);
}

.vuefinder__search-modal__dropdown-option:focus {
  @apply outline-none;
  background-color: var(--vf-dropdown-hover);
}

.vuefinder__search-modal__dropdown-option--selected {
  background-color: var(--vf-dropdown-hover);
  color: var(--vf-dropdown-text);
}

.vuefinder__search-modal__dropdown-option--selected:hover {
  background-color: var(--vf-dropdown-hover);
  color: var(--vf-dropdown-text);
}

.vuefinder__search-modal__dropdown-option-check {
  @apply h-4 w-4 flex-shrink-0 text-current;
}

.vuefinder__search-modal__dropdown-option-check svg {
  @apply h-full w-full;
}

/* Search Options */
.vuefinder__search-modal__options {
  @apply flex items-center justify-between py-1;
}

.vuefinder__search-modal__search-location {
  @apply flex items-center;
}

.vuefinder__search-modal__location-btn {
  @apply flex w-full items-center gap-3 rounded-lg border border-(--vf-border-primary) bg-(--vf-bg-primary) px-4 py-1.5 text-sm transition-all duration-200 hover:bg-(--vf-bg-secondary);
}

.vuefinder__search-modal__location-btn--open {
  @apply rounded-t-lg border-r border-b border-l border-(--vf-border-primary) bg-(--vf-bg-secondary);
}

.vuefinder__search-modal__location-btn--open .vuefinder__search-modal__location-icon {
  @apply text-(--vf-text-primary);
}

.vuefinder__search-modal__location-icon {
  @apply h-5 w-5 flex-shrink-0 text-(--vf-text-secondary);
}

.vuefinder__search-modal__location-icon svg {
  @apply fill-current stroke-current;
}

.vuefinder__search-modal__location-text {
  @apply flex-1 truncate text-left font-medium text-(--vf-text-primary);
}

.vuefinder__search-modal__location-arrow {
  @apply h-6 w-6 flex-shrink-0 text-(--vf-text-secondary) transition-transform duration-200;
}

.vuefinder__search-modal__location-btn--open .vuefinder__search-modal__location-arrow {
  @apply rotate-180 text-(--vf-text-primary);
}

.vuefinder__search-modal__deep-search {
  @apply flex cursor-pointer items-center gap-2 text-sm text-(--vf-text-secondary);
}

.vuefinder__search-modal__deep-search:has(input:disabled) {
  @apply cursor-not-allowed opacity-60;
}

.vuefinder__search-modal__checkbox {
  @apply relative h-3.5 w-3.5 cursor-pointer appearance-none rounded border border-(--vf-border-primary) bg-(--vf-bg-primary);
  accent-color: var(--vf-accent-primary);
}

.vuefinder__search-modal__checkbox:checked {
  @apply border-(--vf-accent-primary) bg-[length:10px_10px] bg-center bg-no-repeat;
  background-color: var(--vf-accent-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M8.5 2.5L4 7L1.5 4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.vuefinder__search-modal__checkbox:focus {
  @apply opacity-100 outline-none;
  box-shadow: 0 0 0 2px var(--vf-accent-primary);
}

.vuefinder__search-modal__checkbox:hover:not(:checked) {
  @apply border-(--vf-accent-primary) opacity-60;
  border-color: var(--vf-accent-primary);
}

.vuefinder__search-modal__checkbox:disabled {
  @apply cursor-not-allowed opacity-60;
}

/* Instructions */
.vuefinder__search-modal__instructions {
  @apply px-4 py-4 sm:px-6;
}

.vuefinder__search-modal__instructions-text {
  @apply text-sm text-(--vf-text-secondary);
}

.vuefinder__search-modal__instructions-tips {
  @apply flex flex-col gap-2 text-xs text-(--vf-text-secondary);
}

.vuefinder__search-modal__tip {
  @apply flex items-center gap-2;
}

.vuefinder__search-modal__tip-key {
  @apply rounded bg-(--vf-bg-secondary) px-2 py-1 font-mono text-[10px] text-(--vf-text-primary);
}

/* Results */
.vuefinder__search-modal__results {
  @apply flex max-h-[50vh] min-h-0 flex-1 flex-col;
}

.vuefinder__search-modal__searching {
  @apply flex items-center justify-center gap-2 py-4 text-(--vf-text-secondary);
}

.vuefinder__search-modal__no-results {
  @apply py-8 text-center text-(--vf-text-secondary);
}

.vuefinder__search-modal__results-list {
  @apply flex min-h-0 flex-1 flex-col;
}

.vuefinder__search-modal__results-header {
  @apply mb-2 flex-shrink-0 border-b border-(--vf-border-primary) pb-2 text-sm font-medium text-(--vf-text-primary);
}

.vuefinder__search-modal__results-scrollable {
  @apply max-h-[300px] min-h-0 flex-1 overflow-y-auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overflow-x: visible;
}

.vuefinder__search-modal__results-items {
  @apply space-y-0.5 p-1;
}

.vuefinder__search-modal__result-item {
  @apply relative mr-2 flex items-center gap-2 rounded-lg border border-transparent p-2 text-xs hover:bg-(--vf-bg-secondary);
}

.vuefinder__search-modal__result-item:hover {
  @apply shadow-sm;
}

.vuefinder__search-modal__result-item--selected {
  @apply border border-(--vf-border-primary) bg-(--vf-bg-secondary);
}

.vuefinder__search-modal__result-item--selected .vuefinder__search-modal__result-icon {
  @apply text-(--vf-text-primary);
}

.vuefinder__search-modal__result-item--selected .vuefinder__search-modal__result-path {
  @apply text-(--vf-text-secondary);
}

.vuefinder__search-modal__result-item--selected .vuefinder__search-modal__result-name {
  @apply text-(--vf-text-primary);
  font-weight: 500;
}

.vuefinder__search-modal__result-icon {
  @apply h-6 w-6 flex-shrink-0 text-(--vf-text-secondary);
}

.vuefinder__search-modal__result-icon svg {
  @apply h-full w-full stroke-current;
}

.vuefinder__search-modal__result-content {
  @apply flex min-w-0 flex-1 flex-col gap-1;
}

.vuefinder__search-modal__result-name {
  @apply overflow-auto text-sm font-medium whitespace-nowrap text-(--vf-text-primary);
}

.vuefinder__search-modal__result-size {
  @apply ml-2 text-xs font-normal text-(--vf-text-secondary) opacity-75;
}

.vuefinder__search-modal__result-path {
  @apply cursor-pointer overflow-auto text-xs whitespace-nowrap text-(--vf-text-secondary) opacity-75 transition-opacity hover:opacity-100;
}

.vuefinder__search-modal__result-actions {
  @apply flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md transition-all duration-200 hover:bg-(--vf-bg-secondary);
}

.vuefinder__search-modal__result-item--selected .vuefinder__search-modal__result-actions {
  @apply bg-(--vf-bg-secondary) text-(--vf-text-primary);
}

.vuefinder__search-modal__result-item--selected .vuefinder__search-modal__result-actions:hover {
  @apply bg-(--vf-border-primary);
}

.vuefinder__search-modal__result-actions-icon {
  @apply h-4 w-4 text-(--vf-text-secondary);
}

.vuefinder__search-modal__result-item--selected .vuefinder__search-modal__result-actions-icon {
  @apply text-(--vf-text-primary);
}

.vuefinder__search-modal__result-actions-icon svg {
  @apply fill-current stroke-current;
}

.vuefinder__search-modal__item-dropdown {
  @apply fixed z-[10001] min-w-[180px] opacity-0 transition-opacity duration-150 ease-out;
  /* Initial positioning to prevent flash - will be overridden by JS */
  left: -9999px;
  top: -9999px;
}

.vuefinder__search-modal__item-dropdown--visible {
  @apply opacity-100;
}

.vuefinder__search-modal__item-dropdown-content {
  @apply box-border flex w-full flex-col gap-0.5 rounded-md border p-2;
  background-color: var(--vf-dropdown-bg);
  border-color: var(--vf-dropdown-border);
}

.vuefinder__search-modal__item-dropdown-option {
  @apply box-border flex w-full cursor-pointer items-center gap-2 rounded-sm px-1.5 py-1.5 text-left text-sm;
  color: var(--vf-dropdown-text);
}

.vuefinder__search-modal__item-dropdown-option span {
  @apply truncate;
  flex: 1;
}

.vuefinder__search-modal__item-dropdown-option:hover {
  background-color: var(--vf-dropdown-hover);
}

.vuefinder__search-modal__item-dropdown-option:focus {
  @apply ring-2 outline-none;
  background-color: var(--vf-dropdown-hover);
  color: var(--vf-dropdown-text);
  ring-color: var(--vf-dropdown-border);
}

.vuefinder__search-modal__item-dropdown-option--selected {
  background-color: var(--vf-dropdown-hover);
  color: var(--vf-dropdown-text);
}

.vuefinder__search-modal__item-dropdown-icon {
  @apply h-4 w-4 flex-shrink-0 text-(--vf-text-secondary) opacity-75;
}

.vuefinder__search-modal__item-dropdown-icon svg {
  @apply fill-current stroke-current;
}

/* Folder Selector */
.vuefinder__search-modal__folder-selector {
  @apply mt-2 bg-(--vf-bg-primary);
}

.vuefinder__search-modal__folder-selector-header {
  @apply flex items-center justify-between border-b border-(--vf-border-primary) px-4 py-3;
}

.vuefinder__search-modal__folder-selector-title {
  @apply text-lg font-medium text-(--vf-text-primary);
}

.vuefinder__search-modal__folder-selector-close {
  @apply flex h-8 w-8 items-center justify-center rounded text-xl text-(--vf-text-secondary) transition-colors hover:bg-(--vf-bg-tertiary) hover:text-(--vf-text-primary);
}

.vuefinder__search-modal__folder-selector-footer {
  @apply flex items-center justify-center border-t border-(--vf-border-primary) px-4 py-3;
}

.vuefinder__search-modal__folder-selector-select {
  @apply rounded border border-(--vf-accent-color) bg-(--vf-accent-color) px-6 py-2 text-sm text-(--vf-accent-text) transition-colors hover:bg-(--vf-accent-color-hover) disabled:cursor-not-allowed disabled:opacity-50;
}

/* Mobile Styles */
@media (max-width: 767px) {
  .vuefinder__search-modal__dropdown {
    @apply z-[10001] w-[180px];
  }

  .vuefinder__search-modal__dropdown-title {
    @apply px-2 py-1 text-xs;
  }

  .vuefinder__search-modal__dropdown-option {
    @apply px-2 py-1 text-xs;
  }

  .vuefinder__search-modal__dropdown-option-check {
    @apply h-3 w-3;
  }

  .vuefinder__search-modal__item-dropdown {
    @apply w-[160px];
  }

  .vuefinder__search-modal__item-dropdown-option {
    @apply gap-1.5 px-1.5 py-1 text-xs;
  }

  .vuefinder__search-modal__radio {
    @apply h-3 w-3;
  }

  .vuefinder__search-modal-layout .vuefinder__modal-layout__wrapper {
    @apply items-end pb-2;
  }

  .vuefinder__search-modal-layout .vuefinder__modal-layout__body {
    @apply mt-auto mb-0 w-[95%];
  }

  .vuefinder__search-modal__content {
    @apply flex-col-reverse;
  }

  .vuefinder__search-modal__search-bar {
    @apply py-2;
  }

  .vuefinder__search-modal__search-input {
    @apply px-2 py-2;
  }

  .vuefinder__search-modal__input {
    @apply text-sm;
  }

  .vuefinder__search-modal__options {
    @apply flex-col items-stretch gap-3;
  }

  .vuefinder__search-modal__location-btn {
    @apply gap-2 rounded-lg px-3 py-1 text-xs;
  }

  .vuefinder__search-modal__location-btn--open {
    @apply rounded-t-lg bg-(--vf-bg-secondary);
  }

  .vuefinder__search-modal__location-icon {
    @apply text-(--vf-text-secondary);
  }

  .vuefinder__search-modal__location-icon svg {
    @apply fill-current stroke-current;
  }

  .vuefinder__search-modal__location-arrow {
    @apply h-3 w-3;
  }

  .vuefinder__search-modal__deep-search {
    @apply gap-1.5 text-xs;
  }

  .vuefinder__search-modal__checkbox {
    @apply h-3.5 w-3.5;
  }

  .vuefinder__search-modal__results {
    @apply max-h-[40vh] min-h-0 flex-1 py-1;
  }

  .vuefinder__search-modal__results-scrollable {
    @apply max-h-[250px] flex-1 overflow-y-auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .vuefinder__search-modal__results-items {
    @apply p-1;
  }

  .vuefinder__search-modal__result-item {
    @apply gap-2 p-2;
  }

  .vuefinder__search-modal__result-actions {
    @apply h-7 w-7;
  }

  .vuefinder__search-modal__result-actions:hover {
    @apply transform-none;
  }

  .vuefinder__search-modal__folder-selector-header {
    @apply py-2;
  }

  .vuefinder__search-modal__folder-selector-title {
    @apply text-base;
  }

  .vuefinder__search-modal__folder-selector-footer {
    @apply py-2;
  }

  .vuefinder__search-modal__folder-selector-select {
    @apply w-full py-2 text-sm;
  }

  .vuefinder__search-modal__item-dropdown {
    @apply z-[10002] w-[180px];
  }

  .vuefinder__search-modal__item-dropdown-content {
    @apply gap-0.5 p-1.5;
  }

  .vuefinder__search-modal__item-dropdown-option {
    @apply gap-2 px-2 py-1.5 text-xs;
  }

  .vuefinder__search-modal__item-dropdown-option:hover {
    @apply transform-none;
  }

  .vuefinder__search-modal__item-dropdown-icon {
    @apply h-3 w-3;
  }

  /* Mobile-only animations */
  .vuefinder__search-modal__instructions {
    @apply translate-x-0 transition-transform duration-300 ease-out;
  }

  .vuefinder__search-modal__instructions--exit {
    @apply -translate-x-full;
  }

  .vuefinder__search-modal__results {
    @apply translate-x-full transition-transform duration-300 ease-out;
  }

  .vuefinder__search-modal__results--enter {
    @apply translate-x-0;
  }
}

/* Desktop Styles */
@media (min-width: 768px) {
  .vuefinder__search-modal-layout .vuefinder__modal-layout__wrapper {
    @apply items-start pt-[10vh];
  }

  .vuefinder__search-modal-layout .vuefinder__modal-layout__body {
    @apply mt-0 mb-auto;
  }

  .vuefinder__search-modal__instructions-tips {
    @apply flex-row gap-4 text-sm;
  }

  .vuefinder__search-modal__tip-key {
    @apply text-sm;
  }
}
